Шаг 4. Решаем конфликт с помощью VS Code Merge Editor

Раньше у VS Code был простой инструмент решения конфликтов, но недавно разработчики выпустили для него обновление. Теперь мыможем использовать новый инструмент или вернуть старый.

Посмотрим, как они работают.

Перейдём в раздел Settings или «Параметры».

Одна красная стрелка указывает на иконку шестерёнки, а другая — на раздел Settings
Одна красная стрелка указывает на иконку шестерёнки, а другая — на раздел Settings

Пропишем в поиске git.mergeEditor.

В поиске по параметрам прописано git.mergeEditor
В поиске по параметрам прописано git.mergeEditor

Далее нам нужно убрать флажок, если хотим вернуть старый инструмент. Мы не будем этого делать, так как новый инструмент удобнее.

Нам также нужно установить Merge Editor для Git по умолчанию, чтобы его можно было вызывать из командной строки. Ведь если мы сейчас попробуем ввести команду git mergetool, то получим ошибку: не настроен ни один инструмент.

Введена команда git mergetool
Введена команда git mergetool

Перейдём в глобальный конфигурационный файл и после всех записей добавим следующее:

[merge]
  tool = vscode
[mergetool "vscode"]
  cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED
[mergetool]
  keepBackup = false

Добавлены новые разделы в глобальный конфигурационный файл
Добавлены новые разделы в глобальный конфигурационный файл

Сохраняем файл.

Давайте разберём новые разделы:

  • В [merge] с ключом tool мы указали редактор кода vscode как инструмент по умолчанию.
  • В разделе [mergetool "vscode"] с ключом cmd мы указали, что после написания команды git mergetool должна открыться новая вкладка в редакторе кода VS Code для решения конфликта.
  • В разделе [mergetool] с ключом keepBackup мы установили значение false, что означает «не нужно сохранять резервные копии после решённых конфликтов».

После этого закрываем конфигурационный файл.

Если мы сейчас пропишем команду git mergetool, то увидим совсем другую картину. Git сообщит, что файлов, нуждающихся в объединении, нет.

Теперь перейдём к основной части — созданию конфликта.

Введена команда git mergetool
Введена команда git mergetool

Создадим другую ветку — conflict/merge-editor — с помощью команды git switch --create conflict/merge-editor.

Введена команда git switch --create conflict/merge-editor
Введена команда git switch --create conflict/merge-editor

Далее внесём изменение в index.html. Добавим элементу <p> атрибут class со значением description.

Красная стрелка указывает на добавленный атрибут class для элемента p
Красная стрелка указывает на добавленный атрибут class для элемента p

После этого добавим изменение в индекс с помощью команды git add --all, а затем зафиксируем его с помощью команды git commit --message "feat: added the class attribute for a paragraph with the value description".

Введена команда git commit --message
Введена команда git commit --message

Затем переключимся на ветку main с помощью команды git switch main.

Введена команда git switch main
Введена команда git switch main

Снова изменим элемент <p>: добавим атрибут class со значением quote.

Красная стрелка указывает на атрибут class элемента p
Красная стрелка указывает на атрибут class элемента p

Теперь добавим это изменение в индекс — git add --all. Зафиксируем его — git commit --message "feat: added the class attribute for a paragraph with the value quote".

Введена команда git commit --message
Введена команда git commit --message

Переходим к слиянию веток и созданию конфликта. В этой же ветке пропишем команду git merge conflict/merge-editor --no-ff --message "feat: the branches were merged and the class attribute for the paragraph was added".

Введена команда git merge conflict/merge-editor --no-ff --message
Введена команда git merge conflict/merge-editor --no-ff --message

Образовался конфликт. Чтобы его решить, воспользуемся инструментом VS Code — Merge Editor, который мы до этого настраивали. Пропишем команду git mergetool.

Введена команда git mergetool
Введена команда git mergetool

Открылась новая вкладка — Merging: index.html. Далее нам нужно выбрать одно изменение или сразу оба. В нашем случае одно — атрибут class со значением description. Установим флажок напротив выделенной линии с нужным нам значением атрибута.

Красная стрелка указывает на установленный флажок
Красная стрелка указывает на установленный флажок

Если вам нужно применить оба изменения, установите флажок ещё и с другой стороны.

Чуть ниже в окне Result можно посмотреть, как будет выглядеть элемент <p> после решения конфликта. Раньше предварительного просмотра и этих окон не было — можно было только выбрать входящие изменение или текущие. И всё это отображалось в самом файле index.html.

Сохраним открытый файл — используем сочетание клавиш Ctrl + S. После этого нажмём на кнопку Accept Merge.

Красная стрелка указывает на кнопку Accept Merge
Красная стрелка указывает на кнопку Accept Merge

После этого окно закроется автоматически, и нас перебросит в раздел Source Control, где можно отредактировать текст коммита, если это нужно.

Красная стрелка указывает на раздел Source Control
Красная стрелка указывает на раздел Source Control

Далее у нас есть несколько вариантов:

  • Мы можем сделать коммит, а потом нам придётся вручную отправлять изменения в удалённый репозиторий.
  • Мы можем нажать на стрелку справа от кнопки Commit и затем выбрать Commit & Push. То есть VS Code сначала сделает коммит, а потом сам же отправит изменения в удалённый репозиторий.
  • Мы можем выбрать Commit & Sync. Тогда сначала изменения будут зафиксированы, затем затянутся изменения с удалённого репозитория — если такие есть, и только затем изменения в локальном репозитории отправятся в удалённый.

Мы выбираем Commit & Push.

Красная стрелка указывает на кнопку Commit & Push
Красная стрелка указывает на кнопку Commit & Push

После этого закрываем раздел, нажав на иконку ветки или на кнопку раздела Source Control.

Красная стрелка указывает на иконку ветки
Красная стрелка указывает на иконку ветки

Далее пропишем команду git log --oneline. Так мы проверяем, что изменения действительно отправлены в удалённый репозиторий.

Введена команда git log --oneline
Введена команда git log --oneline

Наши коммиты находятся на удалённой ветке. Нам осталось только удалить временную ветку с помощью команды git branch -d conflict/merge-editor.

Введена команда git branch -d conflict/merge-editor
Введена команда git branch -d conflict/merge-editor

Ветка удалена. Надеемся, после демонстрации вы больше не будете опасаться конфликтов.